@import (reference) 'icons';
@import (reference) 'config';

.pairing-with-mobile {
  .hide-qr-block {
    background: @color-basic-50;
    width: 200px;
    height: 200px;
    border: 1px dashed @color-basic-200;
    border-radius: @border-radius;

    w-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%)
    }
  }

  w-qr-code,
  .hide-qr-block {
    margin-top: 60px;
  }

  .zoom-in-link,
  w-qr-code {
    display: none;
  }

  .show-qr {
    .hide-qr-block {
      display: none;
    }

    w-qr-code,
    .zoom-in-link {
      display: block;
    }
  }

  .icon.pairing-unavailable {
    height: 80px;
    width: 100%;
    background-image: url(/img/icons/pairing-unavailable-80-error-500.svg);
    background-position: center;
    background-repeat: no-repeat;
  }

  .center.unavailable {
    padding-top: 60px;
  }

  .submit.big {
    padding: 0 64px;
  }
}
